<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        iframe {
            width: 100vw;
            height: 250px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
</body>
<script src="./objectPool.js"></script>
<script>
    const iframeFactory = ObjectPoolFactory(() => {
        let iframe = document.createElement('iframe');
        document.body.appendChild(iframe);

        iframe.onload = () => {
            iframe.onload = null; // 防止 iframe 重复加载的 bug
            iframeFactory.recover(iframe); // 加载完成之后回收节点
        }
        return iframe;
    });

    let iframe1 = iframeFactory.create();
    iframe1.src = 'https://baidu.com';

    let iframe2 = iframeFactory.create();
    iframe2.src = 'https://qq.com';

    setTimeout(() => {
        let iframe3 = iframeFactory.create();
        iframe3.src = 'https://mail.qq.com';
    }, 5000);
</script>
</html>